<div class="container">
    <div [hidden]="submitted">
      <h1>个人信息修改</h1>
      <form (ngSubmit)="onSubmit()" #InfoForm="ngForm">
        <div class="form-group">
          <label for="name">姓名</label>
          <input type="text" class="form-control" id="name"
                 required
                 [(ngModel)]="personInfo.name" name="name"
                 #name="ngModel">
          <div [hidden]="name.valid || name.pristine"
               class="alert alert-danger">
            请填写姓名
          </div>
        </div>
  
        <div class="form-group">
            <label for="sex">性别</label>
            <select class="form-control" id="sex" required [(ngModel)]="personInfo.sex" name="sex" #sex='ngModel' >
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <div [hidden]="sex.valid || sex.pristine"
                    class="alert alert-danger">
                请选择性别
            </div>
        </div>

        <div class="form-group">
            <label for="age">年龄</label>
            <input type="number" class="form-control" id="age"
                    required
                    [(ngModel)]="personInfo.age" name="age"
                    #age="ngModel">
            <div [hidden]="age.valid || age.pristine"
                    class="alert alert-danger">
                请输入年龄
            </div>
        </div>

        <div class="form-group">
            <label for="tel">电话</label>
            <input type="tel" class="form-control" id="tel" pattern="^1[34578]\d{9}$"
                    required
                    [(ngModel)]="personInfo.tel" name="tel"
                    #tel="ngModel">
            <div [hidden]="tel.valid || tel.pristine"
                    class="alert alert-danger">
                请输入正确电话号码
            </div>
        </div>

        <div class="form-group">
            <label for="address">家庭住址</label>
            <input type="text" class="form-control" id="address"
                    required
                    [(ngModel)]="personInfo.address" name="address"
                    #address="ngModel">
            <div [hidden]="address.valid || address.pristine"
                    class="alert alert-danger">
                请输入电话
            </div>
        </div>

  
        <button type="submit" class="btn btn-success" [disabled]="!InfoForm.form.valid">提交</button>
        <button type="button" class="btn btn-default ml1" (click)="onClickBtnCancel()">取消</button>
      </form>
    </div>
  
    
  </div>